<script setup>
import { ref } from 'vue';
import bus from '@/utils/bus';

import { Plus } from '@element-plus/icons-vue'
import { addPet } from '@/api/pet'


const isShow = ref(false);

const defaultModel = {
    petName: '',
    deviceCode: '',
    info: '',
    file: ''
}
const disabled = ref(false)

//图片上传
const imageUrl = ref('')
const onSelectFile = (uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw) //预览图片
    formModel.value.file = uploadFile.raw //将图片存入formModel
}

const formModel = ref({ ...defaultModel })
const formRef = ref()

const rules = ref({
    petName: [{ required: true, message: '请输入宠物名称', trigger: 'blur' }],
    deviceCode: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
    info: [{ required: true, message: '请输入宠物信息', trigger: 'blur' }],
})

defineProps({
    title: {
        type: String,
        default: '标题'
    }
})

const open = () => {
    isShow.value = true;
}

const close = () => {
    isShow.value = false
    formModel.value = { ...defaultModel }
    imageUrl.value = ''
};
// 添加宠物
const handleEmit = async () => {
    await formRef.value.validate()
    disabled.value = true
    try {
        const fd = new FormData()
        for (let key in formModel.value) {
            fd.append(key, formModel.value[key])
        }

        await addPet(fd)
        bus.emit('addPet')
    } catch (err) {
        console.error('报错：', err);
        return
    } finally {
        disabled.value = false
        close()
    }

}

defineExpose({
    open
})

</script>
<template>
    <el-dialog v-model="isShow" :title=title width="500">
        <el-form :model="formModel" :rules="rules" ref="formRef" label-width="100px">
            <el-form-item label="宠物名称" prop="petName">
                <el-input v-model="formModel.petName" placeholder="请输入宠物名称" />
            </el-form-item>
            <el-form-item label="设备编号" prop="deviceCode">
                <el-input v-model="formModel.deviceCode" placeholder="请输入设备编号">
                </el-input>
            </el-form-item>
            <el-form-item label="宠物信息" prop="info">
                <el-input v-model="formModel.info" placeholder="请输入宠物信息" />
            </el-form-item>
            <el-form-item label="宠物图片" prop="file">
                <el-upload :auto-upload="false" class="avatar-uploader" :show-file-list="false" accept=".jpg,.jpeg,.png"
                    :on-change="onSelectFile">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">取消</el-button>
                <el-button :disabled="disabled" type="primary" @click="handleEmit">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style scoped lang='scss'>
.avatar-uploader {
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}

.editor {
    width: 100%;

    :deep(.ql-editor) {
        min-height: 200px;
    }
}
</style>
<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>